<template>
  <div>
    <div class="dashboard-container">
      <div style="margin-bottom: 20px;">
        年类别销售量数据：
        <el-select
          v-model="year"
          placeholder="请输入年份"
          clearable
          filterable
          @change="change"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>

      </div>

      <div ref="main" style="width: 900px; height: 600px; margin: 0 auto" />
    </div>
  </div>
</template>
    
    <script>
import { mapGetters } from "vuex";

var app = {};
var option;
var option;

option = {
  title: {
    text: "2023年类别销售量数据",
    left: "center",
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    orient: "vertical",
    left: "left",
  },
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: "50%",
      data: [
        { value: 1048, name: "Search Engine" },
        { value: 735, name: "Direct" },
        { value: 580, name: "Email" },
        { value: 484, name: "Union Ads" },
        { value: 300, name: "Video Ads" },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
};

export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["username", "roles", "authorities"]),
  },
  props: {
    allData: {
      type: Array,
    },
  },
  data() {
    return {
      nowStatus: "2023年月度数据",
      maxCategoryList: [],
      chart: null,
      year: 2023,
      options: [
        { value: 2023 },
        { value: 2022 },
        { value: 2021 },
        { value: 2020 },
        { value: 2019 },
      ],
      timeStatus: 1, //年度数据0 月度数据1
      categoryStatus: 0, //分类数据0 总销量1
    };
  },
  created() {},
  mounted() {
    let myChart = this.$echarts.init(this.$refs.main);
    this.chart = myChart;
    setTimeout(() => {
      this.YearCategory(2023);
    }, 1500);
  },
  methods: {
    change(value) {
      this.YearCategory(value);
    },
    YearCategory(year) {
      this.maxCategoryList = this.allData[4].saleCategoryByMonthVoList;
      let voList = [];
      this.allData.forEach((item) => {
        voList.push(item.saleCategoryByMonthVoList);
      });
      let productInfo = [];
      for (let i = 0; i < voList.length; i++) {
        let temArr = [];

        voList[i].forEach((item) => {
          let sum = 0;

          item.saleQuantity.forEach((item) => {
            sum += item;
          });
          temArr.push(sum);
        });
        productInfo.push(temArr);
      }

      switch (year) {
        case 2019:
          productInfo = productInfo[0];
          break;
        case 2020:
          productInfo = productInfo[1];
          break;
        case 2021:
          productInfo = productInfo[2];
          break;
        case 2022:
          productInfo = productInfo[3];
          break;
        case 2023:
          productInfo = productInfo[4];
          break;
      }
      this.timeStatus = 0;
      this.categoryStatus = 0;
      option.title.text = year+'年类别销售量数据'
      option.series = {
        type: "pie",
        data: [
          { value: productInfo[0], name: "长袖" },
          { value: productInfo[1], name: "短袖" },
          { value: productInfo[2], name: "长裤" },
          { value: productInfo[3], name: "短裤" },
        ],
      };
      this.chart.dispose();
      this.chart = this.$echarts.init(this.$refs.main);
      option && this.chart.setOption(option, true);
    },
  },
};
</script>
    
    <style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.status {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}
</style>
    